<!--电梯导航-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../utils/jquery/jquery.3.7.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .elevator {
            position: fixed;
            top: 50%;
            left: 10px;
            transform: translateY(-50%);
            background-color: #f8f8f8;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .elevator ul {
            list-style-type: none;
            padding: 10px;
            display: none;
        }
        .elevator li {
            margin: 5px 0;
        }
        .elevator a {
            text-decoration: none;
            color: #333;
            padding: 10px;
            display: block;
        }
        .elevator a:hover {
            background-color: #ddd;
        }
        .current {
            background-color:yellow;
        }
    </style>
</head>
<body>
  <div>
    <div class="elevator">
        <ul>
            <li><a href="javascript:;">Section 1</a></li>
            <li><a href="javascript:;">Section 2</a></li>
            <li><a href="javascript:;">Section 3</a></li>
            <li><a href="javascript:;">Section 4</a></li>
        </ul>
    </div>

    <div id="section1" class="bg" style="height: 800px; background-color: lightblue;">
        Section 1
    </div>
    <div id="section2" class="bg" style="height: 800px; background-color: lightgreen;">
        Section 2
    </div>
    <div id="section3" class="bg" style="height: 800px; background-color: lightcoral;">
        Section 3
    </div>
    <div id="section4" class="bg" style="height: 800px; background-color: lightgoldenrodyellow;">
        Section 4
    </div>
  </div>
</body>
<script type="text/javascript">
    // 节流阀  互斥锁 性能优化 功能没影响
    var flag=true;
    //监听滚动触发
  $(document).scroll(function () {
      var scrollTop = $(this).scrollTop();
      //电梯导航显示隐藏
    var elevator = $('.elevator');
    var elevatorUl = elevator.find('ul');
    if (scrollTop > 500) {
        elevatorUl.fadeIn(500);
    } else {
        elevatorUl.fadeOut(500);
    }
     if(flag){
         $('.bg').each(function (index, element) {
             var offsetTop = $(element).offset().top
             if (scrollTop>=offsetTop ) {
                 $('.elevator li').eq(index).addClass('current').siblings().removeClass('current');
             }
         });
     }
  })


  //电梯导航点击事件
  $('.elevator li').click(function () {
      flag=false
      $(this).addClass('current').siblings().removeClass('current');
      var index = $(this).index();
      const offsetTop = $('.bg').eq(index).offset().top;
      $('html, body').animate({
          scrollTop: offsetTop
      },function(){
            flag=true
      });
  });
</script>
</html>